<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">

</head>
<body>
    <div class="container">
        <!--导航栏-->
        <div class="navigationBar"></div>

        <!--对应界面-->
        <div class="col-md-10">
            <div class="col-md-12" style="border: 1px solid black">
                <div class="col-md-12" style="height: 20px"></div>

                <!--提示栏-->
                <label class="col-md-6" style="font-size: 15px; height: 25px; color: #555555" id="tip"></label>

                <!--显示贴吧列表-->
                <div class="col-md-12" id="postBarList"></div>

                <!--显示翻页器-->
                <div class="myPageTurner"></div>

                <div class="col-md-12" style="height: 20px"></div>

            </div>
        </div>
    </div>

    <script type="text/javascript">
        // 翻页器函数存放
        let updatePageTurnerRoot;
        let pageTurner;
        let user;
        let postBarList = $("#postBarList");

        // 请求得到用户信息
        $.ajaxSettings.async = false;
        $.post("/QG_PostBar/user?method=getUserBySession", function (data){
            user = data;
            $("#tip").html("关注贴吧：" + user.followPostBar + " 个");
        }, "json");
        $.ajaxSettings.async = true;

        // 引入导航栏
        $(".navigationBar").load("navigationBar.html", function (){
            $("#userFollowPostBar").css("color", "red");
        });

        // 引入翻页器
        $(".myPageTurner").load("myPageTurner.html", function (){
            // 从翻页器中获得更新函数和翻页器
            updatePageTurnerRoot = myUpdatePageTurner;
            pageTurner = myPageTurner;

            // 设置回调函数
            myCallback = myGetPageFollowPostBar;

            // 设置数据条数
            pageTurner.attr("totalNum", user.followPostBar);

            updatePageTurnerRoot(0);
        });


        // 请求得到所有用户关注的贴吧
        let myGetPageFollowPostBar = function getPageFollowPostBar() {
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            $.post("/QG_PostBar/postBar?method=getAllPostBarFollowByPage", {"userId": user.userId, "page": nowPage, "num": maxDisplay}, function (data){
                // 先清空列表
                postBarList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取贴吧对象
                    const postBar = data[key];
                    // 获取贴吧的吧主后，将标签添加进来
                    $.get("/QG_PostBar/user?method=getUserById", {"userId": postBar.userId}, function (user){
                        addItem(postBarList, "/QG_PostBar/postBar?method=getPostBarById&postBarId=" +postBar.postBarId,
                            postBar.postBarName, "简介：" + postBar.postBarResume, user.userName, postBar.createDate);
                    }, "json");
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

    </script>
</body>
</html>